<template>
  <view class="container">
    <view :style="tagCloudStyle" class="tag-cloud">
      <tag
        @click.native="handlerTagClick(item)"
        :state="tagnamesHash[item]"
        class="tag"
        v-for="item in tagnames"
        :key="item"
        :text="item"
      ></tag>
    </view>
    <view class="more">
      <view class="left"></view>
      <view class="middle" @click="handlerMoreClick">more</view>
      <view class="right"></view>
    </view>
  </view>
</template>

<script>
import Tag from "./Tag";
export default {
  name: "tag-cloud",
  props: {
    tagnames: {
      type: Array,
      default: () => [],
    },
    max: {
      type: Number,
      default: () => 3,
    },
    maxLine: {
      type: Number,
      default: () => 3,
    },
    selected: {
      type: Array,
    },
  },
  created() {
    Object.values(this.tagnames).forEach((tagname) => {
      this.$set(this.tagnamesHash, tagname, false);
    });
    this.selected.forEach(tag => {
        this.tagnamesHash[tag] = true;
    })
  },
  data() {
    return {
      tagnamesHash: {},
      moreState: false,
      tagHeight: 0,
      displayMore: false,
    };
  },
  computed: {
    tagCloudStyle() {
      if (this.displayMore) {
        if (this.moreState) {
          return ``;
        } else {
          return `height: ${
            this.tagHeight * this.maxLine
          }px; overflow: hidden;`;
        }
      }
      return ``;
    },
  },
  watch: {
    selected(val) {
      console.log(val)
      if (!val || val.length === 0) {
        Object.keys(this.tagnamesHash).forEach(key => {
          this.tagnamesHash[key] = false;
        })
      }
    }
  },
  components: {
    Tag,
  },
  methods: {
    handlerTagClick(text) {
      if (!this.tagnamesHash[text]) {
        if (this.selected.length !== this.max) {
          this.selected.push(text);
          this.tagnamesHash[text] = true;
          this.$emit("update:selected", this.selected);
        }
      } else {
        let selected = this.selected.filter((str) => {
          if (str !== text) {
            return true;
          }
        });
        this.$emit("update:selected", selected);
        // 这里必须更新下当前组件的selected不然有问题 bug
        this.selected.length = 0;
        this.selected.concat(selected);
        this.tagnamesHash[text] = false;
      }
    },
    handlerMoreClick() {
      this.moreState = !this.moreState;
    },
  },
  mounted() {
    let tag = uni.createSelectorQuery().in(this).select(".tag");
    tag
      .fields(
        {
          size: true,
          scrollOffset: true,
          properties: ["value"],
          context: true,
          dataset: true,
        },
        (data) => {
          const tagHeight = parseInt(data["height"], 0) + 8;
          let tagCloud = uni
            .createSelectorQuery()
            .in(this)
            .select(".tag-cloud");
          tagCloud
            .fields(
              {
                size: true,
                scrollOffset: true,
                properties: ["value"],
                context: true,
                dataset: true,
              },
              (data) => {
                this.tagHeight = tagHeight;
                console.log(data.height, tagHeight);
                if (data.height / tagHeight > this.max) {
                  this.displayMore = true;
                }
              }
            )
            .exec();
        }
      )
      .exec();
  },
};
</script>

<style scoped>
.container > .tag-cloud {
  display: flex;
  flex-wrap: wrap;
}
.container > .tag-cloud > .tag {
  margin-top: 8px;
  margin-left: 16px;
}

.container > .more {
  display: flex;
  align-items: center;
  margin-top: 6px;
  width: 100%;
}
.container > .more > .left,
.right {
  width: 100%;
  height: 1px;
  background: #1989fa;
}
.container > .more > .middle {
  color: #1989fa;
  padding: 0 6px;
}
</style>